<template>
  <div>
    <Table
      stripe
      ref="modalTable"
      :columns="columns1()"
      :data="reportData.data"
      style="height:530px"
      :highlight-row="true"
    >
      <template slot-scope="{ row }" slot="noCallTotal">{{getNoCallTotal(row)}}</template>
      <template slot-scope="{ row }" slot="connectTotal">{{row.connectTotal?row.connectTotal:0}}</template>
      <template
        slot-scope="{ row }"
        slot="unConnectTotal"
      >{{row.unConnectTotal?row.unConnectTotal:0}}</template>
      <template
        slot-scope="{ row }"
        slot="unConfirmTotal"
      >{{row.unConfirmTotal?row.unConfirmTotal:0}}</template>
      <template slot-scope="{ row }" slot="confirmTotal">{{row.confirmTotal?row.confirmTotal:0}}</template>
      <template slot-scope="{ row }" slot="waitTotal">{{row.waitTotal?row.waitTotal:0}}</template>
      <template
        slot-scope="{ row }"
        slot="netCalledTotal"
      >{{row.netCalledTotal?row.netCalledTotal:0}}</template>
      <template slot-scope="{ row }" slot="clueTotal">{{row.clueTotal?row.clueTotal:0}}</template>
      <template slot-scope="{ row }" slot="callTime">{{row.callTime?row.callTime:0}}</template>
      <template slot-scope="{ row }" slot="calledTotal">{{row.calledTotal?row.calledTotal:0}}</template>
    </Table>
    <Page
      :total="reportData.total"
      size="small"
      show-total
      show-elevator
      class="tr"
      @on-change="pageChange"
      :current.sync="reportData.current"
      :page-size="reportData.size"
    ></Page>
  </div>
</template>
<script>
import { checkRole, allRoles } from "@/libs/util";
import { constants } from "crypto";

export default {
  data() {
    return {
      adminFlag: false,
      managerFlag: false,
      salesFlag: false,
      reportData: this.initTableData()
    };
  },
  props: {
    search: {
      type: Object,
      default: {}
    },
    type: {
      type: String,
      default: ""
    }
  },
  methods: {
    columns1() {
      var objs = [
        { title: "日期", key: "statDate" },
        { title: "坐席", key: "name", type: "sub" },
        {
          title: "任务总数",
          slot: "clueTotal",
          renderHeader: (h, params) => {
            return this.getHeadTooltip(h, params, "每日分配线索总数");
          }
        },
        { title: "通话时长", slot: "callTime", tooltip: true },
        {
          title: "已拨打总数",
          slot: "calledTotal",
          renderHeader: (h, params) => {
            return this.getHeadTooltip(h, params, "每日拨打总数");
          }
        },
        {
          title: "净拨打总数",
          slot: "netCalledTotal",
          renderHeader: (h, params) => {
            return this.getHeadTooltip(h, params, "每日分配线索净拨打数");
          }
        },
        {
          title: "未拨打总数",
          slot: "noCallTotal",
          renderHeader: (h, params) => {
            return this.getHeadTooltip(h, params, "=任务总数-净拨打总数");
          }
        },
        { title: "呼通数", slot: "connectTotal" },
        { title: "未通数", slot: "unConnectTotal" },
        { title: "无意向总数", slot: "unConfirmTotal" },
        { title: "同意总数", slot: "confirmTotal" },
        { title: "待跟进总数", slot: "waitTotal" }
        // { title: "操作", slot: "action" }
      ];
      var returnObjs = [];
      objs.forEach(k => {
        if (!k.type || k.type == this.type) {
          returnObjs.push(k);
        }
      });
      return returnObjs;
    },
    pageChange() {
      this.query();
    },
    initTableData() {
      return {
        data: [],
        current: 1,
        size: 10
      };
    },
    query() {
      var url = "/report/table/list/{pageNo}";
      var ps = Object.assign({ type: this.type }, this.search);

      this.post(url, ps, { pageNo: this.reportData.current }).then(res => {
        if (this.checkIsSsuccess(res)) {
          this.reportData.data = res.data.content;
          this.reportData.total = res.data.totalElements;
          this.reportData.totalPages = res.data.totalPages;
        } else {
          this.$Message.error({
            content: res["msg"],
            duration: 0,
            closable: true
          });
        }
      });
    },
    getNoCallTotal(row) {
      if (row && row.clueTotal && row.netCalledTotal) {
        var obj = row.clueTotal - row.netCalledTotal;

        return obj > 0 ? obj : 0;
      }
      return "0";
    },
    getHeadTooltip(h, params, content) {
      return h("span", [
        h(
          "Tooltip",
          {
            props: {
              content: content,
              placement: "right",
              maxWidth: "100"
            }
          },
          params.column.title
        )
      ]);
    },
    download() {
     
    }
  },
  created() {
    this.salesFlag = checkRole(allRoles.sales);
    this.managerFlag = checkRole(allRoles.manager);
    this.adminFlag = checkRole(allRoles.admin);
  }
};
</script>